<template>
    <div>
        <div class="main">
            <h2 style="padding-top:10px;padding-left:20px">订单支付详情</h2>
            <el-divider></el-divider>
            <div>
                <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple" style="padding-left:30px"><h3>商品名称：</h3></div></el-col>
                    <el-col :span="20"><div class="grid-content bg-purple-light" style="padding-top:4px">{{this.payInfo.title}}</div></el-col>
                </el-row>
                <el-row style="padding-top:30px"> 
                    <el-col :span="4"><div class="grid-content bg-purple" style="padding-left:30px"><h3>商品数量：</h3></div></el-col>
                    <el-col :span="20"><div class="grid-content bg-purple-light" style="padding-top:4px">{{this.payInfo.product_nums}}</div></el-col>
                </el-row>
                <el-row style="padding-top:30px"> 
                    <el-col :span="4"><div class="grid-content bg-purple" style="padding-left:30px"><h3>商品总价：</h3></div></el-col>
                    <el-col :span="20"><div class="grid-content bg-purple-light" style="padding-top:4px">{{this.payInfo.price}}</div></el-col>
                </el-row>
                <el-row style="padding-top:30px"> 
                    <el-col :span="4"><div class="grid-content bg-purple" style="padding-left:30px"><h3>当前时间：</h3></div></el-col>
                    <el-col :span="20"><div class="grid-content bg-purple-light" style="padding-top:4px">{{this.payInfo.thistime}}</div></el-col>
                </el-row>
                <el-divider></el-divider>
                <div style="padding-left:200px">
                    <el-button @click="dialogVisible = true" v-if="this.couponid == ''">选择积分抵消</el-button>
                    <el-button @click="dialogVisible = true" v-else disabled>选择积分抵消</el-button>
                    <el-button @click="dialogCouponVisible = true" style="margin-left:50px" v-if="this.payInfo.integral == this.payInfo.startintegral">选择优惠券抵消</el-button>
                    <el-button @click="dialogCouponVisible = true" style="margin-left:50px" v-else disabled>选择优惠券抵消</el-button>
                    <p v-if="this.payInfo.integral == this.payInfo.startintegral"></p>
                    <p v-else>当前选择了积分 原积分:{{this.payInfo.startintegral}} 当前积分： {{this.payInfo.integral}}</p>
                    <p v-if="this.couponid == ''"></p>
                    <p v-else>当前选择了优惠券 抵消了{{this.$route.query.price-this.payInfo.price}}</p>
                </div>
                <el-divider></el-divider>
            </div>
            <el-button type="danger" @click="submit" style="margin-left:650px">支付</el-button>
        </div>
        <el-dialog
            title="积分信息"
            :visible.sync="dialogVisible"
            width="30%">
            <span>当前剩余积分：{{this.payInfo.integral}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false;useintegral()" v-if="this.payInfo.integral != 0 && this.payInfo.price > 0">确 定</el-button>
                <el-button type="primary" @click="dialogVisible = false;useintegral()" v-else disabled>确 定</el-button>
            </span>
        </el-dialog>
          <p>支付成功后请等待回调到首页！！请勿关闭！！不然付了钱也支付失败！！不要问为什么这样设计问就是预算没到位!! 付了钱也没有跳转到首页会扣钱但购买没成功！！ 没办法预算不做没做内网穿透</p>
        <el-dialog
            title="优惠券"
            :visible.sync="dialogCouponVisible"
            width="30%">
            <div v-for="coupons in coupon" :key="coupons">
                <div>
                    <el-button type="warning" plain style="width:400px;height:100px;margin-top:30px" v-if="payInfo.price >= coupons.least" @click="usecoupon(coupons.offset,coupons.id)">
                        <div>
                            <p>优惠券适用于：{{coupons.belong}}</p>
                            <p>优惠券最少满：{{coupons.least}}可使用</p>
                            <p>优惠券可抵消：{{coupons.offset}}元</p>
                            <p>优惠券结束时间：{{coupons.end}}</p>
                        </div>
                    </el-button>
                    <el-button type="warning" style="width:400px;height:100px;margin-top:30px" plain v-else disabled>
                        <div>
                            <p>优惠券适用于：{{coupons.belong}}</p>
                            <p>优惠券最少满：{{coupons.least}}可使用</p>
                            <p>优惠券可抵消：{{coupons.offset}}元</p>
                            <p>优惠券结束时间：{{coupons.end}}</p>
                        </div>
                    </el-button>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogCouponVisible = false">取 消</el-button>
                <el-button @click="dialogCouponVisible = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import axios from "axios";
export default {
    name: 'paypage',
    data() {
        return {
        dialogVisible: false,
        dialogCouponVisible: false,
        payInfo: {
            id: '',
            category: '',
            title: '',
            price: '',
            product_nums: '',
            thistime : '',
            integral : '' ,//剩余的积分
            startintegral : '' ,//未使用的积分
            shopname: ''
            },
        coupon: [],
        couponid : ''
        };
    },
    methods: {
        usecoupon(offset,id){
            this.payInfo.price =  this.$route.query.price-offset;
            this.couponid = id;
        },
        useintegral(){
            if(this.payInfo.integral/10 >= this.$route.query.price){
                this.payInfo.price =  this.$route.query.price-this.$route.query.price;
                this.couponid = '';
            }else{
                this.payInfo.price =  this.$route.query.price-(this.payInfo.integral/10);
                this.couponid = '';
            }
            this.payInfo.integral = this.payInfo.integral-(this.$route.query.price-this.payInfo.price)*10
        },
        havetime(){
            console.log("------------");
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            //以下代码依次是获取当前时间的年月日时分秒
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var minute = date.getMinutes();
            var hour = date.getHours();
            var second = date.getSeconds();
            //固定时间格式
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minute >= 0 && minute <= 9) {
                minute = "0" + minute;
            }
            if (second >= 0 && second <= 9) {
                second = "0" + second;
            }
            var currentdate =  year + seperator1 + month + seperator1 + strDate 
                                + " " + hour + seperator2 + minute + seperator2 + second;
            this.payInfo.thistime = currentdate;
        },
        submit() {
            axios.post(
                // 也可以设置为自己的主机名加端口号
                "http://localhost:8080/order/alipay?product_id=" +
                    this.payInfo.id +
                    "&category=" +
                    this.payInfo.category +
                    "&title=" +
                    this.payInfo.title +
                    "&product_nums=" +
                    this.payInfo.product_nums +
                    "&outtradeno=" +
                    this.$md5(this.payInfo.title+this.payInfo.thistime) +
                    "&price=" +
                    this.payInfo.price*this.payInfo.product_nums +
                    "&status=" +
                    "待支付" +
                    "&username=" +
                    this.$cookies.get("username") +
                    "&integral=" +
                    this.payInfo.integral +
                    "&shopname=" + 
                    this.payInfo.shopname

                )
                .then((resp) => {
                // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                const divForm = document.getElementsByTagName("div");
                if (divForm.length) {
                    document.body.removeChild(divForm[0]);
                }
                const div = document.createElement("div");
                div.innerHTML = resp.data; // data就是接口返回的form 表单字符串
                document.body.appendChild(div);
                document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
                document.forms[0].submit();
                });
        }
    },
    mounted(){
        if (this.$cookies.get("username") == null){
            alert("请登录");
            this.$router.push("/login")
        }else{
            this.payInfo.id = this.$route.query.id,
            this.payInfo.category = this.$route.query.category,
            this.payInfo.title = this.$route.query.title,
            this.payInfo.price = this.$route.query.price,
            this.payInfo.product_nums = this.$route.query.product_nums,
            this.payInfo.shopname = this.$route.query.shopname,
            this.havetime(),
            this.$axios.get("/api/getUserIntegral?username="+this.$cookies.get("username")).then(res=>{
                this.payInfo.integral = res.data;
                this.payInfo.startintegral = res.data;
                console.log(this.payInfo.integral);
            });
            this.$axios.get("/api/getAllCoupon?date="+this.payInfo.thistime+"&shopname="+this.$route.query.shopname).then(res=>{
                this.coupon = res.data;
                console.log(this.coupon);
            });
        }
    }
};
</script>

<style scoped>
    div.main{
        margin-left:25%;margin-right:25%;margin-top:5%;
        background-color: #E4E7ED;
        height:500px;
        border-radius: 16px;
    }
</style>